﻿<!DOCTYPE html>
<html >
<head>

	<link rel="stylesheet" href="dojo/dijit/themes/claro/claro.css">
	<style type="text/css">
#dndOne {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  background: red;
}

#dndArea {
  height: 200px;
  border: 1px solid #000;
}
	    .auto-style1 {
            width: 140px;
        }
	    #close {
            height: 13px;
        }
	</style>
	<script>dojoConfig = { async: true, parseOnLoad: false }</script>
	<script src='dojo/dojo/dojo.js'></script>
	
	<script>
	    require(["dojo/dnd/Moveable", "dojo/dom", "dojo/on", "dojo/dom-style", "dojo/domReady!"],
        function (Moveable, dom, on, domStyle) {
            on(dom.byId("doIt"), "click", function () {
                var dnd = new Moveable(dom.byId("dndOne"));
            });
            on(dom.byId("close"), "click", function () {
                domStyle.set(dom.byId("dndOne"), "display", "none");
            });
            on(dom.byId("btxs"), "click", function () {
                domStyle.set(dom.byId("dndOne"), "display", "block");
            });
        });
	</script>
</head>
<body class="claro">
    <div id="dndArea">
  <div id="dndOne" style="width:200px; height:200px">   	
		<table style="background-color:black; align-content:flex-start;width:100%; height:30px">
			<tr style="vertical-align: top; color:white">
				<td class="auto-style1" >标题</td>
				<td><button id="close" style="height:30px" type="button">关闭</button></td>
			</tr>
		</table>
		<div   style="height:150px" data-dojo-attach-point="containerNode">
		</div>
  </div>
</div>
<p><button id="doIt" type="button">拖动</button></p>
    <p><button id="btxs" type="button">显示</button></p>
</body>
</html>